<template>
    <a-form ref='formRef' :label-col='{span : 5}' :model='formData'>
        <a-form-item style='display:none' name='id'>
            <a-input type='hidden' v-model:value='formData.id' />
        </a-form-item>
        <a-form-item label='ID' name='imUserId' :rules="[{required : true, message : '请填写ID'}]">
            <a-input :disabled="formData.id != 0" type='text' v-model:value='formData.imUserId' :maxlength="32" />
        </a-form-item>
        <a-form-item label='手机号码' name='phone' :rules="[{required : true, message : '请填写手机号码'}]">
            <a-input type='text' v-model:value='formData.phone' :maxlength="11" />
        </a-form-item>
        <a-form-item label='名称' name='name' :rules="[{required : true, message : '请填写名称'}]">
            <a-input type='text' v-model:value='formData.name' :maxlength="10" />
        </a-form-item>
        <a-form-item label='头像' name='avatar' :rules="[{required : true, message : '请上传头像'}]">
            <a-upload list-type='picture-card' :max-count="1" v-model:file-list='coverList' :beforeUpload='beforeUpload' :customRequest='uploadCover' @remove="removeCover" accept="image/png,image/jpeg,image/gif,image/webp">
                <template v-if='coverList.length == 0'>
                    <PlusOutlined />
                </template>
            </a-upload>
        </a-form-item>
    </a-form>
</template>

<script lang="ts" setup>
import { uploadApi } from "@/api/Upload";
    import { saveApi } from '@/api/User';
        import { PlusOutlined } from '@ant-design/icons-vue';
        import { ref } from 'vue';
import { Modal } from "ant-design-vue";


    const props = defineProps<{
        row? : any;
    }>()

    const coverList = ref<any[]>([])

    const locales = ref<any[]>([])

    const formRef = ref()

    
    const formData = ref<any>({
        id : 0,
        name : '',
        avatar: '',
        imUserId : '',
        phone : '',
    })

    if(props.row) {
        for(let k in props.row) {
            if(k in formData.value) {
                formData.value[k] = props.row[k]
            }
        }

        if(props.row.avatar) {
            coverList.value[0] = {
                status : 'done',
                url : import.meta.env.B_NET_STATIC_URL + props.row.avatar
            }
        }

    }

    async function submit() {
        let params  = await formRef.value.validate()
        console.log(params)
        if('sort' in params && params.sort === '') {
            params.sort = 0
        }


        return saveApi(params)
    }


    function uploadCover(e) {
        // if(e.file.size > 1024 * 1024) {
        //     Modal.error({
        //         title : '图片不能大于1M'
        //     })
        //     return
        // }



        uploadApi(e.file).then(res => {
            coverList.value[0].status = 'done'
            coverList.value[0].url = import.meta.env.B_NET_STATIC_URL + res.data
            formData.value.avatar = res.data

            formRef.value.validateFields(['avatar'])
        })
    }

    function beforeUpload(file:File, field:FormField) {
        return true
    }


    function removeCover(e,a) {
        console.log(e,a)
    }


    defineExpose({
        submit
    })
</script>